<template>
  <view class="content">
    <u-tabs
      :list="list"
      :font-size="28"
      inactive-color="#333333"
      active-color="#44D94B"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <view class="video_con">
      <mescroll-body
        class="water_scroll"
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        @down="downCallback"
        @up="upCallback"
      >
        <view
          class="video_list"
          v-for="(item, index) in dataList"
          :key="index"
          @click="goDuildInfo(item)"
        >
          <view class="video_intro">
            <view class="intro">
              <text>企业：思密达</text>
              <text></text>
            </view>
          </view>
          <view class="video_title">
            <view class="intro">
              <text>地点：A区1栋3楼</text>
              <text>日期：2021/10/12</text>
            </view>
          </view>
        </view>
      </mescroll-body>
    </view>
    <view
      v-if="cleanType === 0"
      class="xb-bottom-btn"
      @click="
        navTo('/pageSecurity/productionInspection/productionInspectionAdd')
      "
    >
      <u-icon name="plus" class="icon"></u-icon>
      <text>添加周检查</text>
    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      list: [
        {
          name: "周检查",
        },
        {
          name: "月检查",
        },
      ],
      current: 0,

      dataList: [],
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      cleanType: 0,
    };
  },
  onLoad(option) {},
  methods: {
    getTitle(title) {
      uni.setNavigationBarTitle({
        title: title,
      });
    },
    goDuildInfo(row) {
      uni.navigateTo({
        url: "./productionInspectionInfo?id=" + row.id,
      });
    },
    change(index) {
      this.dataList = [];
      this.current = index;

      if (index == 0) {
        this.cleanType = 0;
      } else if (index == 1) {
        this.cleanType = 1;
      }
      this.mescroll.resetUpScroll();
    },

    /*下拉刷新的回调 */
    downCallback(page) {
      let that = this;
      //联网加载数据
      this.apis.greencleanApi
        .clCleanRecordList({
          pageNum: page.num,
          pageSize: page.size,
          cleanType: this.cleanType,
        })
        .then((res) => {
          this.dataList = res.rows;
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.apis.greencleanApi
        .clCleanRecordList({
          pageNum: page.num,
          pageSize: page.size,
          cleanType: this.cleanType,
        })
        .then((res) => {
          this.dataList = this.dataList.concat(res.rows);
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  padding: 0;
}

.content {
  /deep/ .u-tab-item {
    // color: #ffffff !important;
  }

  .video_con {
    overflow-y: auto;
    height: 1160rpx;
    margin-top: 20rpx;
    padding: 0 20rpx;
  }

  .video_list {
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    .video_intro,
    .video_title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #333333;
      .intro {
        display: flex;
        font-size: 28rpx;
        justify-content: space-between;
        text:nth-child(2) {
          font-size: 26rpx;
        }
      }
    }
    .video_intro {
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #eeeeee;
    }
    .video_title {
      padding-top: 20rpx;
      .intro {
        font-size: 26rpx;
        color: #999999;
      }
    }
  }

  .xb-bottom-btn {
    // background: #FFFFFF;
    // color: #44D94B;
    .icon {
      margin-right: 10upx;
    }
  }
}
</style>
